<!-- TabBar.vue -->
<template>
    <van-tabbar v-model="active" @change="handleChange">
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="todo-list-o" to="/trip">行程</van-tabbar-item>
        <van-tabbar-item icon="orders-o" to="/orders">订单</van-tabbar-item>
        <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// 获取路由实例
const router = useRouter();
const route = useRoute();

// 当前选中的标签索引
const active = ref(0);

// 监听路由变化，自动更新 active 状态
watch(
    () => route.path,
    (newPath) => {
        switch (newPath) {
            case '/':
                active.value = 0;
                break;
            case '/trip':
                active.value = 1;
                break;
            case '/orders':
                active.value = 2;
                break;
            case '/user':
                active.value = 3;
                break;
        }
    },
    { immediate: true } // 立即执行一次以初始化 active 状态
);

// 处理标签切换事件
const handleChange = (index) => {
    console.log('Tab changed to:', index);
    // 这里可以根据需要添加更多的逻辑，比如页面切换等
};
</script>

<style scoped>
/* 你可以在这里添加自定义样式 */
</style>